<template>
	<div class="musiclistdetail">

		<van-sticky>
			<div class="top">
				<div>
					<i class="iconfont icon-return" @click="$router.go(-1)"></i>
					<p>歌单</p>
				</div>
				<i class="iconfont icon-liebiao"></i>

			</div>
		</van-sticky>

		<div class="musictitle" >
			<div class="imgbox">
				<img :src="list.coverImgUrl" alt="" />
			</div>
			<div class="lefttext" >
				<h3>{{list.name}}</h3>
				<div class="nickname" v-if="list.creator">
					<img :src="list.creator.avatarUrl" alt="" />
					<span>{{list.creator.nickname}}</span>
					<i class="iconfont icon-you"></i>
				</div>
				<van-cell @click="showPopup">
					<div class="content">
						<p>{{list.description}}</p>
						<i class="iconfont icon-you"></i>
					</div>
				</van-cell>
				<van-popup  v-model="show" class="infomation" @click="shownone">
					<div class="title_top">
						<div class="picBox">
							<img :src="list.coverImgUrl" alt="" />
						</div>
						<h4>{{list.name}}</h4>
					</div>
					<h5 v-if="list.tags">标签:<p>{{list.tags[0]?list.tags[0]:""}}</p></h5>
					<div class="desc">
						<p>{{list.description}}</p>
					</div>
				</van-popup>
			</div>
		</div>

		<div class="download">
			<div>
				<i class="iconfont icon-pinglun"></i>
				<p>{{list.trackCount}}</p>
			</div>

			<div>
				<i class="iconfont icon-xunzhao1"></i>
				<p>{{list.shareCount}}</p>
			</div>

			<div>
				<i class="iconfont icon-xiazai"></i>
				<p>下载</p>
			</div>

			<div>
				<i class="iconfont icon-bianji"></i>
				<p>多选</p>
			</div>
		</div>

		<van-sticky :offset-top="50">
			<div class="playmores">
				<div class="playmore">
					<i class="iconfont icon-bofang"></i>
					<span>播放全部</span>
				</div>
				<button>+ 收藏({{list.subscribedCount}})</button>
			</div>
		</van-sticky>

		<div class="musicall">

			<div class="musicone" @click="playmusic(val.id)" v-for="(val,index) in list.tracks" :key="val.id">
				<div class="box">
					<div class="xuhao">
						<p>{{index+1}}</p>
					</div>
					<div class="boxtitle">
						<h2>{{val.name}}	
						<span>{{val.tns?val.tns[0]:""}}</span></h2>
						<p>{{val.ar[0].name}}</p>
					</div>
				</div>
				<div class="icons">

					<i class="iconfont icon-bofang"></i>
					<i class="iconfont icon-dashujukeshihuaico-"></i>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loading: false,
				show: false
			}
		},
		created() {
			console.log(this.$route.query.idx)
			this.$http.get("/playlist/detail", {
				params: {
					id: this.$route.query.idx
				}

			}).then(res => {
				console.log(res)
				this.list = res.data.playlist

			})
		},
		methods: {
			down() {
				this.loading = true
				console.log(123);
			},
			playmusic(id) {
				localStorage.setItem("mid",id)
//				if(this.$store.state.idx){
//					if(!(id == this.$store.state.idx)){
//						localStorage.setItem("mid",id)
//					}
//				}else{
//					localStorage.setItem("mid",id)
//				}
				this.$router.push({
					name: "musicPlayPage",
					params: {
						mid: id
					}
				})
			},
			showPopup() {
				this.show = true;
			},
			shownone(){
				this.show = false;
			},
			common(){
				this.$router.push({
					name:"musiclistcommon",
					params:{
						cid:this.$route.query.idx
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.van-cell {
		background: none;
		padding: 0;
	}
	
	.van-cell::after {
		content: '';
		display: none;
	}
	
	.musiclistdetail {
		background: #333;
		.top {
			width: 100%;
			background: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: vw(10) vw(16);
			div {
				display: flex;
				align-items: center;
				i {
					font-size: vw(22);
					color: white;
				}
				p {
					color: #fff;
					font-size: vw(16);
					margin-left: vw(4);
				}
			}
			i {
				font-size: vw(24);
				color: white;
			}
		}
		.musictitle {
			display: flex;
			justify-content: space-between;
			padding: 0 vw(16);
			align-items: center;
			margin-bottom: vw(16);
			.imgbox {
				width: 30%;
				height: vw(102);
				border-radius: vw(4);
				overflow: hidden;
				img {
					width: 100%;
				}
			}
			.lefttext {
				width: 66%;
				h3 {
					padding-bottom: vw(8);
					font-size: vw(14);
					font-weight: normal;
					letter-spacing: vw(1);
					color: #fff;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.nickname {
					display: flex;
					align-items: center;
					margin-top: vw(6);
					img {
						width: vw(20);
						height: vw(20);
						border-radius: 50%;
						overflow: hidden;
						margin-right: vw(4);
					}
					span {
						font-size: vw(12);
						color: #ddd;
					}
					i {
						font-size: vw(12);
						color: #ddd;
						margin-left: vw(4);
					}
				}
				.content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: vw(8);
					p {
						width: 86%;
						font-size: vw(10);
						color: #ddd;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					i {
						width: 10%;
						color: #ddd;
						font-size: vw(12);
					}
				}
				.van-popup {
					top:40%;
					background: none;
					width: 100%;
					padding: 0 vw(30);
				}
				.infomation {
					background-color: none;
					padding-top: vw(150);
					.title_top {
						text-align: center;
						width: 100%;
						.picBox {
							width: 60%;
							margin: 0 auto;
							overflow: hidden;
							height: vw(189);
							border-radius: vw(10);
							img {
								width: 100%;
							}
						}
						h4 {
							font-size: vw(14);
							color: #fff;
							font-weight: 500;
							margin-top: vw(20);
						}
					}
					h5{
						color: #fff;
						font-weight: 500;
						margin-top: vw(30);
						p{
							display: inline-block;
							margin-left: vw(20);
							background: rgba(255,255,255,.3);
							padding: vw(2) vw(4);
							border-radius: 40px;
						}
					}
					.desc{
						width: 100%;
						line-height: vw(22);
						margin-top: vw(6);
						font-size: vw(11);
						color: #fff;
					}
				}
			}
		}
		.download {
			display: flex;
			justify-content: space-between;
			padding: vw(10) vw(40);
			align-items: center;
			div {
				text-align: center;
				i {
					font-size: vw(22);
					color: #ddd;
				}
				p {
					margin-top: vw(6);
					font-size: vw(12);
					color: #ddd;
				}
			}
		}
		.playmores {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background: #fff;
			padding: vw(12) vw(16);
			border-top-left-radius: vw(16);
			border-top-right-radius: vw(16);
			.playmore {
				i {
					font-size: vw(18);
				}
				span {
					font-size: vw(16);
					margin-left: vw(10);
				}
			}
			button {
				background: red;
				padding: vw(6);
				border-radius: 50px;
				font-size: vw(12);
				color: #eee;
			}
		}
		.searchFix {
			position: fixed;
			top: vw(66);
			left: 0;
			width: 100%;
			z-index: 2;
		}
		.musicall {
			width: 100%;
			background-color: white;
			padding: vw(10) vw(16);
			.musicone {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: vw(10) 0;
				.box {
					.xuhao {
						width: vw(20);
						text-align: center;
						display: inline-block;
						vertical-align: middle;
						p {
							color: #999;
							font-size: vw(14);
						}
					}
					.boxtitle {
						margin-left: vw(16);
						display: inline-block;
						vertical-align: middle;
						h2 {
							width: vw(180);
							font-size: vw(14);
							color: #000;
							font-weight: 500;
							margin: 0 0 vw(2);
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							span {
								font-size: vw(12);
								color: #999;
							}
						}
						p {
							font-size: vw(10);
							color: #999;
						}
					}
				}
				.icons {
					display: flex;
					align-items: center;
					color: #999;
					i {
						font-size: vw(24);
						margin: 0 0 0 vw(10);
					}
					i:nth-child(2) {
						font-size: vw(32);
					}
				}
			}
		}
	}
</style>